<template>
    <div>
        <Layout>
            <Sider hide-trigger :style="{background: '#fff', width: '260px', maxWidth: '260px', flex: '0 0 260px'}">
                <Card title="应用" icon="md-apps" :padding="5" shadow style="width: 250px; margin:0px 5px;">
                    <CellGroup @on-click="onClientSelected">
                        <Cell v-for='(client,index) in clientList' :title='client.clientName' :selected='client.selected' :name="index" />
                    </CellGroup>
                </Card>
            </Sider>
            <Content :style="{padding: '0px', minHeight: '280px', background: '#fff'}">
                <Card :title="contextTitle" icon="md-apps" :padding="5" shadow style="margin:0px 5px;">
                    <div style="float: right;"  slot="extra">
                        <ButtonGroup>
                            <Button @click="addRootAction">新增</Button>
                        </ButtonGroup>
                    </div>
                    <Tree :data="treeNodes" :render="renderTreeNode" @on-toggle-expand="treeNodeExpanded"></Tree>
                </Card>
                <!-- <Spin size="large" fix v-if="loading"></Spin> -->
            </Content>
        </Layout>

        <Modal
                :title="modalTitle"
                v-model="modalShow"
                :mask-closable="false"
                :closable="false"
                :footer-hide="true"
                scrollable
                class-name="vertical-center-modal">
            <Form :ref="formRef" :model="formData" label-position="right" :rules="formValidateRule" :label-width="100">
                <input v-model="formData.resourceId" name="resourceId" type="hidden">
                <input v-model="formData.clientId" name="clientId" type="hidden">
                <input v-model="formData.parentId" name="parentId" type="hidden">
                <FormItem label="资源编号" prop="resourceId" v-if="actionType === 'edit'">
                    {{ formData.resourceId }}
                </FormItem>
                <FormItem label="资源名称" prop="resourceName">
                    <Input v-model="formData.resourceName" name="resourceName" placeholder="资源名称"></Input>
                </FormItem>
                <FormItem label="资源路径" prop="url">
                    <Input v-model="formData.url" name="url" placeholder="资源路径"></Input>
                </FormItem>
                <FormItem label="权限标识" prop="permission">
                    <Input v-model="formData.permission" name="permission" placeholder="权限标识"></Input>
                </FormItem>
                <FormItem label="资源类型">
                    <RadioGroup v-model="formData.resourceType">
                        <Radio label="0">菜单</Radio>
                        <Radio label="1">操作</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="排序" prop="orderValue">
                    <Input v-model="formData.orderValue" name="orderValue" placeholder="排序"></Input>
                </FormItem>

                <FormItem>
                    <div style="float: right;">
                        <Button style="margin-right: 10px" @click="formCancelHandle">取消</Button>
                        <Button type="primary" @click="formSaveHandle">保存</Button>
                    </div>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>